const path = require('path');
const VueLoaderPlugin = require('vue-loader-plugin');

const isProd = process.env.NODE_ENV === 'production';

module.exports = {
  entry: {
    app: './src/main.js', // 设置打包入口
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: isProd ? 'js/[name].[contenthash:8].js' : '[name].js',
    chunkFilename: isProd ? 'js/[name].[contenthash:8].js': '[name].js',
    publicPath: isProd ? '' : '/',
  },
  resolve: {
    extensions: ['.js', '.vue', '.json', '.less'], // 设置可省略扩展名的文件
    modules: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules')],
    alias: { // 设置路径别名
      '@': path.resolve(__dirname, 'src'),
      '@c': path.resolve(__dirname, 'src/components'),
      '@s': path.resolve(__dirname, 'src/store'),
      '@a': path.resolve(__dirname, 'src/api'),
      '@as': path.resolve(__dirname, 'src/assets'),
      '@u': path.resolve(__dirname, 'src/utils'),
      '@v': path.resolve(__dirname, 'src/view'),
    },
  },
  module: {
    rules: [
      { // 配置vue解析器
        test: /.vue$/,
        use: {
          loader: 'vue-loader',
        },
      },
      { // 配置图片解析器
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10 * 1024, // 转换base64的最大文件大小
              name: 'assets/img/[name].[hash:8].[ext]', // 当生成文件时的输出目录
              esModule: false, // 标记为非esm，以便输出文件地址
            },
          },
        ],
      },
      { // 配置视频解析器
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              name: 'assets/media/[name].[hash:8].[ext]',
              esModule: false,
            },
          },
        ],
      },
      { // 配置字体解析器
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10 * 1024,
              name: 'assets/fonts/[name].[hash:8].[ext]',
              esModule: false,
            },
          },
        ],
      },
    ],
  },
  plugins: [
    // 解析vue
    new VueLoaderPlugin(),
  ],
};
